<script setup>
import { ref } from 'vue'
import { storeToRefs } from 'pinia'
import { RouterLink } from 'vue-router'

import { useWeatherStore } from '@/stores/weather.js'

const { LocalCityData, buttonShow } = storeToRefs(useWeatherStore())
const { getLocalData, handleAddCity } = useWeatherStore()

const isShow = ref(false)

const handleAdd = () => {
  handleAddCity()
  buttonShow.value = false
}

const link = () => {
  getLocalData()
  buttonShow.value = false
}
</script>

<template>
  <div class="bg-weather-primary shadow-lg sticky top-0 z-20">
    <nav class="container flex flex-col sm:flex-row items-center gap-4 text-white py-6">
      <router-link to="/">
        <div class="flex items-center gap-3" @click="link">
          <i class="fa-solid fa-sun text-2xl"></i>
          <p class="text-2xl">新中地天气</p>
        </div>
      </router-link>

      <div class="flex gap-4 items-center">
        <h4 class="text-lg">{{ LocalCityData.city }}</h4>
        <span class="text-sm"
          >实时天气: {{ LocalCityData.weather }} {{ LocalCityData.temperature }}℃</span
        >
        <span class="text-sm"
          >{{ LocalCityData.winddirection }}风 {{ LocalCityData.windpower }} 级</span
        >
      </div>

      <div class="flex gap-3 flex-1 justify-end">
        <i
          class="fa-solid fa-circle-info text-xl hover:text-weather-secondary cursor-pointer duration-1000"
          @click="isShow = true"
        ></i>
        <i
          class="fa-solid fa-plus text-xl hover:text-weather-secondary duration-150 cursor-pointer"
          @click="handleAdd"
          v-if="buttonShow"
        ></i>
      </div>
    </nav>

    <div
      class="fixed z-20 w-full bg-black bg-opacity-30 h-screen top-0 left-0 flex justify-center px-8 text-black animate__animated"
      v-if="isShow"
    >
      <div class="p-4 bg-white self-start mt-32 max-w-screen-md">
        <h2>关于:</h2>
        <p class="text-xs mb-4">这个应用可以用来追踪你选择城市的当前天气</p>
        <h2>如何使用:</h2>
        <p class="text-xs mb-4">
          1.点击搜索框输入你希望追踪的城市
          <br />
          2.在搜索结果中选中一个城市，你将获取当地最新的天气
          <br />
          3.点击右侧的＋号可以将追踪城市的天气情况保存在首页
        </p>
        <h2>移除城市:</h2>
        <p class="text-xs">
          如果你不想在首页关注某个城市,可以通过底部的按钮删
          <br />
          除它
        </p>
        <button
          @click="isShow = false"
          class="text-white mt-8 bg-weather-primary py-2 px-6 text-xs"
        >
          关闭
        </button>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.fa-circle-info:hover {
  color: rgb(0, 78, 113);
}
.fa-plus:hover {
  color: rgb(0, 78, 113);
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>
